<template>
  <div class="com-title"
       :style="{width: `${style.width}px`,height: `${style.height}px`,minWidth: `${style.minWidth}px`,minHeight: `${style.minHeight}px`}">
    <h5>{{config.text}}</h5>
    <div @click="elbtn">我是外部组件里面的com-title elbtn事件点我</div>
    <span>125222</span>
    <p @click="update">update更新事件点我</p>
    <h2>hahhaha</h2>
    <p v-for="(item,index) in dataList" :key="index">{{ item.value }}</p>
  </div>
</template>

<script>
import {ref, reactive, toRefs} from "vue";
import config from '@/config'

export default {
  name: __NAME__,
  config,
  emits: ['elbtn','update'],
  setup(props, ctx) {
    /**
     * 数据
     * */
    const dataState = reactive({
      dataList: [
        {
          value: '888'
        },
        {
          value: '777'
        }
      ],
      config: {},
    })

    const style = ref({
      "width": 300,
      "height": 200,
      "minWidth": 100,
      "minHeight": 50
    })

    /**
     * 配置变更后执行 绘制
     * @param {Array} data 数据
     * @param {Object} config 配置参数
     */
    function render(data, config){
      if(!Array.isArray(data)){
        console.error('data必须是数组')
        return
      }
      if(!Object.keys(config).length){
        return
      }
      dataState.dataList = data
      dataState.config = Object.assign({},dataState.config,config)
    }

    /**
     * 大小调整
     * @param {number} width 数据
     * @param {number} height 配置参数
     */
    function resize(width, height){
      // 比如重新渲染图表等操作
    }

    /**
     * 清空
     */
    function clear(){
      console.log('组件清空')
    }
    /**
     * 销毁
     */
    function destroy(){
      console.log('组件销毁')
    }
    /**
     * 更新组件配置，接收的入参config是修改后的新配置。
     */
    function update() {
      console.log('update')
      ctx.emit('update', '更新组件配置')
    }

    /**
     * 自定义事件
     */
    function elbtn() {
      console.log('elbtn')
      dataState.num ++
      ctx.emit('elbtn', '点我干嘛')
    }

    return {
      ...toRefs(dataState),
      style,
      render,
      resize,
      clear,
      destroy,

      click,
      elbtn,
      update
    }
  },
}
</script>
<style scoped lang="scss">
@import "../styles/index";
</style>
